<!-- 
	@desc 自定义表单组件
	@date 20230720
	--------对于整个表单-----------
	labelFormPosition: 表单域提示文字的位置，left-左侧，top-上方
	borderFormBottom: 是否显示表单域的下划线边框	
	labelFormWidth: 提示文字的宽度，单位px
	labelFormAlign：lable字体的对齐方式 默认left 可选 center/right
 -->

<template>
	<view>
		<u--form :labelPosition="labelFormPosition" :borderBottom="borderFormBottom" :labelWidth="labelFormWidth"
			class="baseform" :labelAlign="labelFormAlign" :labelStyle="labelStyle" :model="formModel" :rules="formRules"
			ref="baseForm">
			<view style="padding-bottom: 40rpx;">
				<u-row v-for="(item,index) in formRow" :key="index">
					<u-col v-for="(row,rowIndex) in item.uCol" :span="row.span ? row.span : spanNumber" :key="rowIndex">
						<u-form-item v-if="row.tag == 'input'" :label="row.label" :prop="row.prop" ref="item1"
							:borderBottom="row.borderBottom" @click="handlerRowInputClickEvent(row,rowIndex)"
							:labelWidth="row.labelWidth" :labelPosition="row.labelPosition" :rightIcon="row.rightIcon"
							:leftIcon="row.leftIcon" :required="row.required"
							:class="(getRule(row.prop)?'ruleFormClass ':'')">
							<u--input v-if="row.type == 'uInput'" :placeholder="row.placeholder" clearable
								v-model="formModel.formData[row.prop]" :suffixIcon="row.suffixIcon"
								:disabled="row.disabled" :border="row.border"
								:disabledColor="row.disabledColor"></u--input>

							<u--textarea v-if="row.type == 'uTextarea'" v-model="formModel.formData[row.prop]"
								:height="row.height?row.height: 100" :maxlength="row.maxlength ? row.maxlength: '-1'"
								:placeholder="row.placeholder" :suffixIcon="row.suffixIcon" :disabled="row.disabled"
								:border="row.border" :disabledColor="row.disabledColor"></u--textarea>
							<u-radio-group v-if="row.type == 'uRadio'" v-model="formModel.formData[row.prop]"
								@change="handlerRadioChange($event,row,rowIndex)">
								<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in row.options"
									:key="index" :label="item.label" :name="item.value">
								</u-radio>
							</u-radio-group>
							<u-checkbox-group v-if="row.type == 'uCheckbox'" v-model="formModel.formData[row.prop]"
								shape="square" placement="column" @change="handlerCheckboxChange($event,row,rowIndex)">
								<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in row.options"
									:key="index" :label="item.label" :name="item.value"
									:disabled="item.disabled ? true:false">
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
						<!-- 简单下拉框 -->
						<u-form-item v-if="row.tag == 'select'" :label="row.label" :prop="row.prop" ref="item2"
							:class="(getRule(row.prop)?'ruleFormClass ':'')" :borderBottom="row.borderBottom"
							@click="row.show = true" :labelWidth="row.labelWidth" :labelPosition="row.labelPosition"
							:rightIcon="row.rightIcon" :leftIcon="row.leftIcon" :required="row.required">
							<!-- keyName，自定义需要展示的text属性键名 -->
							<u-picker :show="row.show" :columns="[row.options]"
								:closeOnClickOverlay="row.closeOnClickOverlay ? true:false"
								@close="handlerSelectClose(row,rowIndex)" @cancel="handlerSelectClose(row,rowIndex)"
								@confirm="selectConfirm($event,row,rowIndex)" :keyName="row.keyName"></u-picker>
							<u--input :placeholder="row.placeholder" v-model="formModel.formData[row.prop]" clearable
								:suffixIcon="row.suffixIcon ? row.suffixIcon:''" :disabled="row.disabled"
								:border="row.border" :disabledColor="row.disabledColor"></u--input>
						</u-form-item>
						<!-- 此组件用于单个选择日期，范围选择日期等 
							mode
								为single只能选择单个日期
								为multiple可以选择多个日期
								为range可以选择日期范围
						-->
						<u-form-item v-if="row.tag == 'calendar'" :label="row.label" :prop="row.prop" ref="item2"
							:class="(getRule(row.prop)?'ruleFormClass ':'')" :borderBottom="row.borderBottom"
							@click="row.show = true" :labelWidth="row.labelWidth" :labelPosition="row.labelPosition"
							:rightIcon="row.rightIcon" :leftIcon="row.leftIcon" :required="row.required">
							<!-- keyName，自定义需要展示的text属性键名 -->
							<u-calendar :show="row.show" :mode="row.mode" :showTitle="row.title" round="10"
								:closeOnClickOverlay="row.closeOnClickOverlay ? true:false"
								@close="handlerCalendarClose(row,rowIndex)"
								@confirm="calendarConfirm($event,row,rowIndex)" :maxDate="row.maxDate"
								:minDate="row.minDate" :monthNum="row.monthNum"></u-calendar>
							<u--input :placeholder="row.placeholder" v-model="formModel.formData[row.prop]"
								suffixIcon="calendar" clearable :disabled="row.disabled" :border="row.border"
								:disabledColor="row.disabledColor"></u--input>
						</u-form-item>
						<!-- 此选择器用于时间日期
						   mode  配置选择何种日期格式。datetime年月日时分 date为日期选择，time为时间选择，year-month为年月选择
						   参数minDate和maxDate可以设置最大值和最小值（传入时间戳）。
						 -->
						<u-form-item v-if="row.tag == 'datetime'" :label="row.label" :prop="row.prop" ref="item2"
							:class="(getRule(row.prop)?'ruleFormClass ':'')" :borderBottom="row.borderBottom"
							@click="row.show = true" :labelWidth="row.labelWidth" :labelPosition="row.labelPosition"
							:rightIcon="row.rightIcon" :leftIcon="row.leftIcon" :required="row.required">
							<!-- keyName，自定义需要展示的text属性键名 -->
							<u-datetime-picker :show="row.show" :mode="row.mode" :value="defaultTime(row)"
								:closeOnClickOverlay="row.closeOnClickOverlay ? true:false" :maxDate="row.maxDate"
								:minDate="row.minDate" @confirm="dateTimeConfirm($event,row,rowIndex)"
								@cancel="handlerDateTimeClose(row,rowIndex)"
								@close="handlerDateTimeClose(row,rowIndex)"></u-datetime-picker>
							<u--input :placeholder="row.placeholder" v-model="formModel.formData[row.prop]" clearable
								suffixIcon="arrow-right" :disabled="row.disabled" :border="row.border"
								:disabledColor="row.disabledColor"></u--input>
						</u-form-item>
					</u-col>
				</u-row>
			</view>
		</u--form>

	</view>
</template>

<script>
	export default {
		props: {
			labelFormPosition: {
				type: String,
				default: "left"
			},
			borderFormBottom: {
				type: Boolean,
				default: true
			},
			labelFormWidth: {
				type: [Number, String],
				default: 100
			},
			labelFormAlign: {
				type: String,
				default: "left"
			},
			labelStyle: {
				type: Object,
				default: () => {
					return {
						padding: '10px 0 10px 10px'
					};
				},
			},
			// 表单验证规则
			formRules: {
				type: Object,
				default: () => {
					return {};
				},
			},
			// 表单页面结构数据
			formRow: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				spanNumber: 12,
				formModel: {
					formData: {
						hour: ''
					}
				},
			}
		},
		mounted() {},
		methods: {
			bbb(a, b) {
				console.log(a, "测试", b)
			},
			defaultTime(row) {
				if (row.mode == 'datetime' || row.mode == 'date' || row.mode == 'year-month') {
					return Number(new Date())
				} else if (row.mode == 'time') {
					return new Date().toLocaleTimeString().slice(0, 5)
				} else {
					return
				}
			},
			handlerRowInputClickEvent(row, index) {
				this.$emit("handlerRowInputClickEvent", row, index)
			},
			// 下拉框确认事件
			selectConfirm(value, row, index) {
				this.$emit("selectConfirm", value, row, index)
				row.show = false
			},
			// 下拉框关闭事件
			handlerSelectClose(row, index) {
				row.show = false
			},
			// 日期关闭事件
			handlerCalendarClose(row, index) {
				row.show = false
			},
			// 日期时间关闭事件
			handlerDateTimeClose(row, index) {
				row.show = false
			},
			// 日期确认事件
			calendarConfirm(value, row, index) {
				this.$emit("calendarConfirm", value, row, index)
				row.show = false
			},
			// 日期时间确认事件
			dateTimeConfirm(e, row, index) {
				const timeFormat = uni.$u.timeFormat
				let time = ''
				if (row.mode == 'datetime') {
					time = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				} else if (row.mode == 'date') {
					time = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (row.mode == 'year-month') {
					time = timeFormat(e.value, 'yyyy-mm')
				} else if (row.mode == 'time') {
					// time = timeFormat(e.value, 'hh:MM')
					time = e.value
				} else {
					time = ''
				}
				this.$emit("dateTimeConfirm", time, row, index)
				row.show = false
			},
			// 复选框change事件
			handlerCheckboxChange(e, row, rowIndex) {
				this.$emit("handlerCheckboxChange", e, row, rowIndex)
			},
			// 单选框change事件
			handlerRadioChange(e, row, rowIndex) {
				this.$emit("handlerRadioChange", e, row, rowIndex)
			},
			setField(propLabel, value) {
				this.$set(this.formModel.formData, propLabel, value);
			},
			incomingParameters(vale) {
				for (let i in vale) {
					this.setField(i, vale[i]);
				}
			},
			// 表单提交
			submitForm(formName) {
				let formRules = {
					formData: {
						...this.formRules
					}
				}
				// this.formRules = formRules
				console.log(this.$refs[formName].validate(), "formRules")
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(valid)
						// this.$emit('onSubmit', this.formModel.formData)
					} else {
						console.log('error submit!!');
						return false
					}
				})
			},
			// 表单重置
			resetForm(formName) {
				this.choiceAssignment({})
			},
			//弹窗赋值
			choiceAssignment(value) {
				this.formModel.formData = Object.assign({}, value)
			},
			getRule(rowList) {
				let requiredType = false
				if (this.formRules[rowList] && this.formRules[rowList].length > 0) {
					this.formRules[rowList].forEach(el => {
						if (el.required) {
							requiredType = true
						}
					})
				}
				return requiredType
			}
		},
	}
</script>

<style lang="scss" scoped>
	.baseform {
		padding: 20rpx;
	}

	.u-form-item {
		padding: 0 30rpx;
	}

	.u-popup {
		flex: none;
	}

	::v-deep .u-form-item__body__right__message {
		margin: 0 !important;
	}

	::v-deep .ruleFormClass {
		.u-line {
			border-bottom: 2rpx solid #E6A23C !important;
		}
	}
</style>